import React, { useState, useEffect, useRef, useCallback } from "react";
import { NavBar, Button, Space, Swiper, Image, SearchBar, Grid, Ellipsis, Tag, Footer } from "antd-mobile";
import { UserOutline, FireFill } from "antd-mobile-icons";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import styles from "../../App.scss";
import axios from "axios";
import logo from "../../doc/logo.png";
import request, { baseUrl } from "../../utils/request";

function Search() {
    const [params, setParams] = useSearchParams();
    const [keyword, setKeyword] = useState(params.get("keyword") || "");
    const [newsearch, setSearch] = useState([]);
    // 加个标点，为了第一次进来不会重新把地址的key值变成undefind
    const [index, setIndex] = useState(0);
    const getSearch = async (value) => {
        if (index != 0) {
            setParams(`keyword=${value}`);
        }

        const { data } = await request.post(`/books/list/search/'${keyword}'`, {
            params: {
                book: keyword,
                sort: "views",
            },
        });
        setSearch(data.data);
    };

    const changeKeyword = (value) => {
        setKeyword(value);
    };

    useEffect(() => {
        getSearch();
        setIndex(index + 1);
    }, []);
    // 返回上一个打开搜索框的页面（首页/书城/书柜）
    const navigate = useNavigate();
    const goToHome = () => {
        navigate(-1);
    };

    const gotoDetail = useCallback((id) => {
        navigate("/detail?id=" + id);
        window.scrollTo(0, 0);
    }, []);

    return (
        <div>
            {/* 导航栏 */}
            <NavBar
                style={{ padding: 0 }}
                back={null}
                left={
                    <Image
                        src={logo}
                        onClick={() => {
                            goToHome();
                        }}
                    />
                }
            ></NavBar>
            {/* 搜索框 */}
            <SearchBar
                value={keyword}
                onSearch={getSearch}
                onChange={changeKeyword}
                style={{ "--background": "#e9e2e2" }}
            />
            {/* 搜索内容 */}
            <Grid columns={1} gap={8}>
                <Grid.Item span={1}>
                    {newsearch.map((item) => (
                        <Grid columns={1} style={{ margin: "1em 0" }}>
                            <Grid.Item key={item.id} onClick={gotoDetail.bind(null, item.id)}>
                                <div className="newnovel">
                                    <Image
                                        src={item.pic}
                                        width="120px"
                                        height="90px"
                                        fit="fill"
                                        style={{ marginRight: 5 }}
                                    ></Image>
                                    <div className="newnovel-content">
                                        <span style={{ fontSize: "16px", fontWeight: "bold" }}>{item.book}</span>
                                        <Ellipsis
                                            style={{ fontSize: "13px", color: "#808080" }}
                                            rows={2}
                                            direction="end"
                                            content={item.brief}
                                        />
                                        <div>
                                            <span style={{ lineHeight: 0, fontSize: "12px", color: "#808080" }}>
                                                <UserOutline />
                                                {item.author}
                                            </span>
                                            <span style={{ float: "right" }}>
                                                <Tag color="orange" fill="outline" style={{ marginRight: 4 }}>
                                                    {item.booktype}
                                                </Tag>
                                                <Tag color="red" fill="outline">
                                                    <FireFill />
                                                    {item.hot}
                                                </Tag>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </Grid.Item>
                        </Grid>
                    ))}
                </Grid.Item>
            </Grid>

            {/* 尾部 */}
            <Footer label="没有更多了" content="Copyright © 2022 趣学藏书阁"></Footer>
        </div>
    );
}

export default Search;
